import React, { Component, Fragment } from 'react';
import { history } from 'umi';

import axios from 'axios';
import {
  TeamOutlined,
  HomeOutlined,
  LockOutlined
} from '@ant-design/icons';
import { Row, Col, Form, Space, Input, Button,Alert,notification  } from 'antd';

// import DocumentTitle from 'react-document-title';
import styles from './Login.less';
import logo from '@/assets/logo-i.png';
import loginPage from '@/assets/login-page.png';

import {  getConst } from '@/utils/utils';

export default class Login extends Component {
  state = {
    formData: {
      userCode: '',
      password: ''
    }
  };

  

  componentDidMount() {
   
  };

  login = () => {
    axios.post('/api/login', this.state.formData).then((res) => {
        if(res.status == 200){
          if (res.data.error_code == 0){
            console.log(res.data)
            window.localStorage.setItem('x-token', res.data.id);
            // 跳转
            history.push('/basicLayout');
          } else {
            // 弹出提示框
            notification.error({
              message: '用户名或密码错误'
            })
            console.log("失败啦")
          }
        }
    })
  }


  useAuth = () => {
    let token = window.localStorage.getItem('x-token');
    console.log(token)
    return window.localStorage.getItem('x-token') == null ? true : false;
  }

  render() {
    const {
      formData
    } = this.state

      return (
        // <DocumentTitle >
          <div className={styles.container}>
            <Row className={styles.height100} style={{ margin: 0 }}>
              <Col sm={24} md={14} className={styles.height100}>
                <div className={styles.leftContent}>
                  <img src={loginPage} alt="logo" />
                </div>
              </Col>
              
              <Col sm={24} md={10} className={styles.height100}>
                <div className={styles.content}>
                  <div className={styles.mainContent}>
                    <div className={styles.qrCode}>
                      {/* {!qrCodeType && <Icon type="qrcode" />}
                      {qrCodeType && <Icon type="desktop" />} */}
                      <div className={styles.maskLayer}></div>
                    </div>
                    <div className={styles.header}>
                        <img
                          style={{ maxWidth: 160, marginBottom: 36 }}
                          alt="logo"
                          className={styles.logo}
                          src={logo}
                        />
                    </div>
                    
                    <div className={styles.subTitle}>深圳网新新思内部管理系统</div>
                    <div className={styles.threeTitle}>Internal Management System</div>
                    <div>
                      <Form >
                        <Form.Item rules={[
                            { required: true, message: '请输入用户名称' },
                            { pattern: /^[a-zA-Z0-9_-]{4,20}$/, message: '格式不正确请重新输入' }
                          ]} name="userCode">
                            <Input
                              prefix={<Space><TeamOutlined/></Space>}
                              placeholder="用户名称"
                              size="large"
                              value={formData.userCode} onChange={(e) => this.setState({ formData: {...formData, userCode: e.target.value } })}
                              className={styles.inputNoBorder}
                            />
                        </Form.Item>
                        <Form.Item rules={[
                            { required: true, message: '请输入登录密码' },
                          ]}
                          style={{ marginBottom: 48 }} name="password">
                            <Input
                              prefix={<Space><LockOutlined/></Space>}
                              type="password"
                              placeholder="登录密码"
                              size="large"
                              value={formData.password} onChange={(e) => this.setState({ formData: {...formData, password: e.target.value } })}
                              className={styles.inputNoBorder}
                            />
                        </Form.Item>
                        <Form.Item>
                          <Button
                            htmlType="submit"
                            type="primary"
                            block
                            size="large"
                            onClick={() => this.login()}
                            style={{ background: 'rgb(8,86,160)', borderColor: 'rgb(8,86,160)' }}
                          >
                            登录
                          </Button>
                        </Form.Item>
                      </Form>
                      <div className={styles.footerTitle}>
                        {`Copyright `}
                        <Space><TeamOutlined/></Space>
                        {` ${getConst('companyNameShort')} ${getConst('copyright')} ${getConst(
                          'version'
                        )}(${getConst('subVersion')}, ${getConst('backendSvnVersion')})`}
                      </div>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
      );
  }
}
